<template>
  <div class="digital-human-video">
    <div class="video-container">
      <video 
        ref="videoRef" 
        class="video-element"
        autoplay
        muted
        playsinline
        @canplay="onVideoCanPlay"
        @error="onVideoError"
      />
      <div class="video-overlay">
        <div class="video-info">
          <span class="video-label">视频通话</span>
          <div class="video-status" :class="statusClass">
            <div class="status-dot"></div>
            <span>{{ statusText }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import type { DigitalHumanController } from '../controller/DigitalHumanController'

// Props
interface Props {
  controller: DigitalHumanController | null
}

const props = defineProps<Props>()

// 响应式数据
const videoRef = ref<HTMLVideoElement | null>(null)
const videoLoaded = ref(false)
const videoError = ref(false)
const connectionStatus = ref<string>('connecting')

// 计算属性
const statusClass = computed(() => {
  switch (connectionStatus.value) {
    case 'connected':
      return 'status-connected'
    case 'error':
      return 'status-error'
    default:
      return 'status-connecting'
  }
})

const statusText = computed(() => {
  switch (connectionStatus.value) {
    case 'connected':
      return '已连接'
    case 'error':
      return '连接错误'
    default:
      return '连接中'
  }
})

// 事件处理
const onVideoCanPlay = () => {
  console.log('Video can play')
  videoLoaded.value = true
  connectionStatus.value = 'connected'
}

const onVideoError = (event: Event) => {
  console.error('Video error:', event)
  videoError.value = true
  connectionStatus.value = 'error'
}

// 监听控制器变化
watch(() => props.controller, (newController) => {
  if (newController && videoRef.value) {
    newController.setAgentView(videoRef.value)
  }
}, { immediate: true })

// 生命周期
onMounted(() => {
  if (videoRef.value && props.controller) {
    props.controller.setAgentView(videoRef.value)
  }
})
</script>

<style scoped>
.digital-human-video {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 800px;
  max-height: 600px;
  border-radius: 1rem;
  overflow: hidden;
  background: #000;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    transparent 20%,
    transparent 80%,
    rgba(0, 0, 0, 0.3) 100%
  );
  pointer-events: none;
}

.video-info {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.video-label {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.video-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  font-size: 0.75rem;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.status-connecting .status-dot {
  background: #ffc107;
}

.status-connected .status-dot {
  background: #28a745;
}

.status-error .status-dot {
  background: #dc3545;
  animation: none;
}

@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .video-container {
    max-width: 100%;
    max-height: 70vh;
  }
  
  .video-info {
    top: 0.5rem;
    left: 0.5rem;
  }
}
</style>
